<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="${ctxStatic}/layer/layer.js"></script>
<style>
	.container{padding-left: 40px;}
	.row-item{float: left;height: 50px;line-height: 50px;}
	.row-item select{display: inline-block;width: 105px; }
	.row-item span{display: inline-block; width: 90px;}
	.row-item label{ width: 68px;font-weight: 900;font-size: 13px;}
	.w200{width: 200px;}
	.row-sta{padding-right: 5px;}
	.row-sta .row-sta-span{display: inline-block;width: 175px;}
    #item_box{min-height: 200px;}

</style>
<script>
	$(function () {
		function  calculateAmount() {
			var payAmount=0;
			var refundAmount=0;
			var giveAmount=0;
			var exp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
			$(".row-item-container").each(function (index,dom) {
				var amountDom=$(dom).find("input[name='amount']");
				var amount=amountDom.val();
				var settlementtype=$(this).data("settlementtype");
				//金额校验
				if(!amount||!exp.test(amount)){
					amountDom.css("border","1px solid red");
				}else{
					amountDom.css("border","1px solid #ccc");
					if(settlementtype=="0"){
						payAmount+=Number(amount);
					}else if(settlementtype=="1"){
						refundAmount+=Number(amount);
					}else{
						giveAmount+=Number(amount);
					}
				}
			});
			$("#payAmount").text(payAmount);
			$("#refundAmount").text(refundAmount);
			$("#giveAmount").text(giveAmount);
		}
		$(".btn-add").click(function () {
			var sType=$("#s_type").val();
			//收款
			if("0"==sType){
				$("#item_box").append($("#row_item_sk_pl").html());
			}//退款
			else if("1"==sType){
				$("#item_box").append($("#row_item_tk_pl").html());
			}
		});
		$("body").on("click",".remove_item",function () {
			$(this).closest(".row").remove();
			calculateAmount();
		});
		$("body").on("blur","input[name='amount']" ,function() {
			var exp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
			var val=$(this).val();
			if(!val||!exp.test(val)){
				$(this).css("border","1px solid red");
			}else{
				$(this).css("border","1px solid #ccc");
				calculateAmount();
			}
		});

        $("#btnCancel").click(function () {
            parent.layer.closeAll();
        });
		$("#btnSubmit").click(function () {
			//参数校验
			var exp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
			var isPass=true;
			var amountMsg="";
			var param={};
			$(".row-item-container").each(function (index,dom) {
				var amountDom=$(dom).find("input[name='amount']");
				var amount=amountDom.val();
				var settlementtype=$(this).data("settlementtype");
				//金额校验
				if(!amount||!exp.test(amount)){
					isPass=false;
					amountMsg="请输入正确的金额";
					amountDom.css("border","1px solid red");
				}else{
					param["items["+index+"].amountStr"]=amount;
					amountDom.css("border","1px solid #ccc");
					param["items["+index+"].remarks"]=$(dom).find("input[name='remarks']").val()||"";
					param["items["+index+"].payFlag"]="1";
					if(settlementtype=="0"){
						param["items["+index+"].type"]="0";
						param["items["+index+"].accountId"]=$(dom).find("select").val();

					}else if(settlementtype=="1"){
						param["items["+index+"].type"]="1";
						param["items["+index+"].accountId"]=$(dom).find("select").val();
					}else{
						param["items["+index+"].type"]="1";
					}

					param["items["+index+"].settlementType"]=settlementtype;
				}
			});

			if(!isPass){
				layer.alert(amountMsg,-1);
				return;
			}
			var customPayId=$("#customPayId").val();
			param["customPayId"]=customPayId;
			param["settlementDateStr"]=$("#settlementDate").val();

			$.ajax({
				type : "POST",  //提交方式
				url : "${ctx}/sys/settlement/settlement/doSettlement",//路径
				data : param,//数据，这里使用的是Json格式进行传输
				success : function(data) {//返回数据根据结果进行相应的处理
					if(data){
						layer.alert("结算成功！",function () {
                            parent.window.location.reload();
                        });
					}else{
						layer.alert("操作失败",-1);
					}
				}
			});
		});
	});
</script>
<input type="hidden" id="customPayId" value="${customPay.id}" />
<div class="container">
	<div class="row">
		<h1>【${member.username}】的${loan.name}贷款申请</h1>
	</div>
	<div class="row row-sta">
		<span class="row-sta-span ">客户信息：${member.nickname}(${member.username})</span>
		<span class="row-sta-span ">申请产品：${loan.name} </span>
		<span class="row-sta-span ">结算时间：<input id="settlementDate" name="settlementDate" value="${currentDate}" type="text" readonly="readonly" style="width: 105px;"  class="Wdate "onclick="WdatePicker({dateFmt:'yyyy-MM-dd ',isShowClear:false});"/></span>
	</div>
	<div class="row row-sta">
		<span class="row-sta-span">收款总计：<span id="payAmount">0</span></span>
		<span class="row-sta-span">退款总计：<span id="refundAmount">0</span> </span>
		<span class="row-sta-span">付款总计：<span id="giveAmount">0</span> </span>
		<span class="w200" class="row-sta-span">结算方式：<select id="s_type" style="width: 100px"><option value="0">收款</option><option value="1">退款</option><option value="2">付款</option></select></span>
		<span><button class="btn btn-primary btn-add">添加</button></span>
	</div>
	<div id="item_box">

	</div>
	<div class="row" style="display: block;margin: 0 auto;width: 200px;margin-top: 30px;">
		<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
		<input id="btnCancel" class="btn" type="button" value="取消" />
	</div>

	<script type="text/template" id="row_item_sk_pl">
		<div class="row row-item-container" style="overflow: hidden" data-settlementtype="0">
			<div class="row-item">
				<label>结算项：</label>
				<span >收款	</span>
			</div>
			<div class="row-item w200">
				<label>收款方式：</label>
				<span>	<select><c:forEach items="${payTypes}" var="account"><option value="${account.id}">${account.name}</option></c:forEach></select></span>
			</div>
			<div class="row-item w200">
				<label>收款金额：</label>
				<span><input type="text" style="width: 100px;height: 30px" name="amount" placeholder="单位（元）" /></span></div>
			<div class="row-item w200">
				<label>备注：</label>
				<span>	<input type="text" style="width: 100px;height: 30px" name="remarks" placeholder="请输入备注" /></span>
			</div>
			<div class="row-item ">
				<a href="javascript:void(0)" class="remove_item">删除</a>
			</div>
		</div>
	</script>
	<script type="text/template" id="row_item_tk_pl">
		<div class="row row-item-container" style="overflow: hidden" data-settlementtype="1">
			<div class="row-item">
				<label>结算项：</label>
				<span>退款	</span>
			</div>
			<div class="row-item w200">
				<label>扣除项：</label>
				<span>	<select><c:forEach items="${deductTypes}" var="account"><option value="${account.id}">${account.name}</option></c:forEach></select></span>
			</div>
			<div class="row-item w200">
				<label>退款金额：</label>
				<span><input type="text" style="width: 100px;height: 30px" name="amount" placeholder="单位（元）" />	</span>
			</div>
			<div class="row-item w200">
				<label>备注：</label>
				<span>	<input type="text" style="width: 100px;height: 30px" name="remarks" placeholder="请输入备注" /></span>
			</div>
			<div class="row-item ">
				<a href="javascript:void(0)" class="remove_item">删除</a>
			</div>
		</div>
	</script>


</div>
